Day4 Image

先在Assets.xcassets新增一個Image Set，並且放入一張照片。Assets.xcassets這個檔案可以在左邊的樹狀結構中至找到。

如圖：

而要使用這個照片檔，直接加入UI元件Image，並且帶入Image Set的名稱，例如：

Image("Dogs")

但此時會呈現如圖，因為很明顯，在這張照片的解析度大小範圍超過了手機，就會造成狀況，必須要加以縮小。

而要將照片縮小，可以使用兩個屬性resizable與scaledToFit，例如：

Image("Dogs")
    .resizable()
    .scaledToFit()

resizable可以將照片縮小到與螢幕大小一致，但就會出現照片變形的狀況，因為照片的寬與高不一定與手機的寬高一致。而此時加入scaledToFit就會發生作用，它可以讓照片不會產生變形。

如圖：

接下來做一點變化，將照片使用圓形剪裁，屬性clipShape可以裁切成圓形，例如：

Image("Dogs")
    .resizable()
    .scaledToFit()
    .clipShape(Circle())

然後加入圓形外框，overlay表示覆蓋一層UI元件，在這裡覆蓋了一個圓形Circle()，例如：

Image("Dogs")
    .resizable()
    .scaledToFit()
    .clipShape(Circle())
    .overlay {
        Circle().stroke(.blue, lineWidth: 4)
    }

Circle是畫圖元件，他可以畫出一個圓形，在這裡也另外加入寬度為4，例如：

Circle().stroke(.blue, lineWidth: 4)

然後加入陰影，屬性shadow表示為陰影，例如：

Image("Dogs")
    .resizable()
    .scaledToFit()
    .clipShape(Circle())
    .overlay {
        Circle().stroke(.blue, lineWidth: 4)
    }
    .shadow(radius: 7)

最後的成果顯示如圖：

而這個做好的圓型照片的View，可以修改為子View，子View可以讓其它View來引用，例如：

struct SwiftUIView1: View {
    var body: some View {
        HStack() {
            Text("Hello SwiftUI")
                .font(.title)
                .foregroundStyle(.green)
            
            Spacer()
            
            Text("I love SwiftUI")
                .font(.subheadline)
        }
        .padding()
    }
}

將剛剛的照片View修改成子View，例如：

struct SwiftUIView2: View {
    var body: some View {
        Image("Dogs")
            .resizable()
            .scaledToFit()
            .clipShape(Circle())
            .overlay {
                Circle().stroke(.blue, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

所以就可以在其它的View來引用這兩個子View，使用子View的方式為直接宣告該View的名稱，例如：

struct SwiftUIView3: View {
    var body: some View {
        VStack(spacing: 0) {
            SwiftUIView2()
                .frame(width: 220)
            
            SwiftUIView1()
        }
    }
}

而在子View也可以使用所有的UI相關的屬性，例如在SwiftUIView2又加入了屬性frame來設定寬度。

如圖：

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day4 [完]